<template>
  <div class="videoCall">
    <bigVideo v-if="cf_members.length" :id="bigVideoData && bigVideoData.id" :stream="bigVideoData && bigVideoData.stream" :camera="bigVideoData && bigVideoData.camera"></bigVideo>
    <smallVideo v-if="cf_members.length" :id="smallVideoData && smallVideoData.id" :stream="smallVideoData && smallVideoData.stream" :camera="smallVideoData && smallVideoData.camera" @click.native="flag=!flag"></smallVideo>
    <operate></operate>
  </div>
</template>

<script>
// 双人用视频通话页
import bigVideo from './components/bigVideo'
import smallVideo from './components/smallVideo'
import operate from './components/operate'
import { Message } from 'element-ui'

export default {
  name: 'videoCall',
  data () {
    return {
      flag: true
    }
  },
  components: {
    bigVideo,
    smallVideo,
    operate
  },
  computed: {
    // 会议成员
    cf_members () {
      return this.$store.state.conferenceRoom.cf_members
    },
    // 大视频所用
    bigVideoData () {
      if (this.flag) {
        return this.cf_members.filter(item => !this.tools.isSelf(item.id))[0]
      } else {
        return this.cf_members.filter(item => this.tools.isSelf(item.id))[0]
      }
    },
    // 小视频所用
    smallVideoData () {
      if (!this.flag) {
        return this.cf_members.filter(item => !this.tools.isSelf(item.id))[0]
      } else {
        return this.cf_members.filter(item => this.tools.isSelf(item.id))[0]
      }
    }
  },
  created () {

  },
  beforeDestroy () {
    // 当离开通话页面时
    Message({
      type: 'info',
      message: '通话已结束'
    })
    this.$store.commit('conferenceRoom/close_allPeer')
    this.$store.commit('conferenceRoom/reset_state')
  }
}
</script>

<style scoped lang="scss">
.videoCall {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000;
}
</style>
